<template>
  <Modal v-model="visible"
         title="添加角色"
         @on-cancel="closeModal"
         footer-hide
         :width="620">
    <Form ref="form" :model="form" :rules="rules"
          :label-width="100">
      <FormItem label="角色" prop="role">
        <Input v-model="form.role" placeholder="请输入角色"></Input>
      </FormItem>
      <FormItem label="描述" prop="description">
        <Input v-model="form.description" placeholder="请输入描述"></Input>
      </FormItem>
      <FormItem label="分配权限" prop="resourceIds">
        <Tree ref="resourceTree" :data="resources"
              show-checkbox multiple check-strictly
              @on-check-change="handleResources"></Tree>
      </FormItem>
      <FormItem>
        <Button type="primary" :loading="submitting" @click="submit">提交</Button>
      </FormItem>
    </Form>
  </Modal>
</template>

<script>
import { resourceTree } from '../../../../apis/system/resource';
import { createRole } from '../../../../apis/system/role';

export default {
  name: 'create',
  data() {
    return {
      visible: false,
      form: {
        role: undefined,
        description: undefined,
        resourceIds: [],
      },
      rules: {
        role: [
          { required: true, message: '请输入角色', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ],
        resourceIds: [
          { type: 'array', required: true, message: '请选择资源', trigger: 'change' }
        ]
      },
      resources: [],
      submitting: false
    };
  },
  methods: {
    openModal() {
      this.visible = true;
      this.initResources();
    },
    initResources() {
      resourceTree((responseData) => {
        this.resources = this.getResources(responseData);
      });
    },
    getResources(resources) {
      const resultResources = [];
      this.$lodash.forEach(resources, (item) => {
        const resource = {
          id: item.id,
          title: item.name,
          type: this.$json.parse(item.type) ? this.$json.parse(item.type).description : '',
          expand: true,
          // eslint-disable-next-line
          render: (h, { root, node, data }) => {
            const nodeSpan = [
              h('span', data.title),
              h('Tag', {
                props: {
                  color: 'blue'
                },
                style: {
                  marginLeft: '12px'
                }
              }, data.type),
            ];
            return h('span', nodeSpan);
          }
        };
        if (item.children && item.children.length > 0) {
          resource.children = this.getResources(item.children);
        }
        resultResources.push(resource);
      });
      return resultResources;
    },
    handleResources(checkedResources) {
      const resourceIds = [];
      this.$lodash.forEach(checkedResources, (item) => {
        resourceIds.push(item.id);
      });
      this.form.resourceIds = resourceIds;
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitting = true;

          createRole({
            role: this.form.role,
            description: this.form.description,
            resourceIds: this.form.resourceIds
          }, () => {
            this.submitting = false;

            this.$Message.success('保存成功');
            this.closeModal();
            this.$refs.form.resetFields();
            this.$emit('success');
          }, () => {
            this.submitting = false;
          });
        }
      });
    },
    closeModal() {
      this.visible = false;
    }
  }
};
</script>

<style scoped>

</style>
